<template>
      <div class="tab-bar-item" @click="itemClick">
        <div v-if="!isActive">
          <slot name="item-icon"></slot>
        </div>
        <div v-else>
          <slot name="item-icon-active"></slot>
        </div>
        <div :style="activeStyle">
          <!-- 因为插槽会被替换，所以给嵌套它外面的盒子添加样式，这样就可以继承他的样式 -->
          <slot name="item-text"></slot>
        </div>
      </div>
</template>

<script>
export default {
  name:"TabBarItem",
  data(){
    return {}
  },
  computed:{
    isActive(){
      return this.$route.path.indexOf(this.path) !== -1
    },
    activeStyle(){
      return this.isActive ? {color:this.activeColor} : {} 
    }
  },
  props:{
    path:String,
    activeColor:{
      type:String,
      default:'red'
    }
  },
  methods: {
    itemClick(){
      this.$router.push(this.path,()=>{});
    }
  },
}
</script>

<style>
  .tab-bar-item {
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 49px;
  }

  .tab-bar-item img{
    width: 25px;
    height: 25px;
  }

  .tab-bar-item span {
    font-size: 13px;
    padding-top: 1px;
  }
</style>